
import {useState,useEffect} from 'react';
function App() {
  let [count, setCount] = useState(0)
  console.log('App1 update')
  const handleClick = () => {
      setCount(count + 1)
  }
  return (
      <div onClick={handleClick}>
          App1 clicked {count} times
          <App2 />
      </div>
  )
}

const App2 = (props) => {
  const [count, setCount] = useState(0)

  const handleClick = () => {
    setTimeout(() => {
      setCount(count + 1)
      setCount(count + 1)
    }, 0)
  }

  useEffect(() => {
    console.log(count)
  }, [count])

  console.log("render")
  return (
    <div>
      <button onClick={handleClick}>+1</button>
      <h1>{count}</h1>
    </div>
  )
}

export default App;
